<template>
  <div class="pf-flow-prop-form" id="js-properties-panel-custom">
    <pf-form :config="formConfig" :model="formData">
      <template v-slot:formKey-slot>
        <i class="el-icon-user" @click="openDialog" />
      </template>
    </pf-form>
    <el-dialog :width="'90%'" title="表单信息" v-model="dialogVis">
      <pf-table
        class="pf-mt-20"
        :config="tableConfig"
        :data="tableDatas"
        @selection-change="selectionChange"
        :page-param="pageParam"
        @page-size-change="pageSizeChange"
        @page-change="pageChange"
        @current-page-change="pageChange"
      >
        <el-table-column type="selection"></el-table-column>
      </pf-table>
      <template v-slot:footer>
        <el-button type="primary" @click="confirmSelForm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, reactive, ref, Ref, toRefs, watch } from 'vue';
import {
  emptyTable,
  FormModel,
  ResponseCodeEnum,
  TableModel,
  useData,
  useHttpClient
} from 'pf-component';
import { buildBizFormInfo } from '@/views/page-config/flow/custom-properties/form-data';
import { TableNameEnum } from '@/constants/enum/table-name.enum';
import { systemApi } from '@/constants/api/system-api';
import { useNotice } from '@/components/element-plus/notice';
import { modeler } from '@/views/page-config/flow/flow-modeler';

export default defineComponent({
  name: 'ElementForm',
  props: ['id', 'type'],
  setup(props: any) {
    const elementId: Ref = toRefs(props).id;
    const tableConfig: Ref<TableModel> = ref(emptyTable);
    const tableDatas: Ref<any[]> = ref([]);
    const pageParam: any = reactive({ total: 0, pageSize: 10, pageNum: 1 });

    const formConfig: Ref<FormModel> = ref(buildBizFormInfo());
    const formData: Ref = ref({});
    const dialogVis: Ref<boolean> = ref(false);
    const openDialog = () => {
      dialogVis.value = true;
      initTableDatas();
    };
    const closeDialog = () => {
      dialogVis.value = false;
    };
    const confirmSelForm = () => {
      if (selectedFieldList.value && selectedFieldList.value.length) {
        const formKeys = selectedFieldList.value.map(v => v.name).join();
        formData.value.formKey = formKeys;
      } else {
        formData.value.formKey = null;
      }
      modeler.updateActiveElement({ formKey: formData.value.formKey });
      closeDialog();
    };
    const initFormData = () => {
      formData.value.formKey = modeler.getActiveElement().businessObject.formKey;
    };
    const selectedFieldList: Ref<any[]> = ref([]);
    const selectionChange = (selection: any[]) => {
      selectedFieldList.value = selection;
    };
    const initTableDatas = () => {
      useHttpClient()
        .general<any>(systemApi.formConfigApi.list, undefined, pageParam)
        .then(res => {
          if (res.code === ResponseCodeEnum.SUCCESS) {
            const pageData = res.data;
            tableDatas.value = pageData.records;
            pageParam.total = pageData.total;
          } else {
            useNotice().message.error(res.message);
          }
        });
    };

    const pageChange = (val: number) => {
      pageParam.pageNum = val;
      initTableDatas();
    };
    const pageSizeChange = (val: number) => {
      pageParam.pageSize = val;
      initTableDatas();
    };
    onMounted(() => {
      useData()
        .loadTable([{ name: TableNameEnum.sysForm, config: tableConfig }])
        .then(res => {
          if (res) {
            // tableConfig.value.checkbox();
            initTableDatas();
          }
        });
    });
    watch(
      elementId,
      () => {
        nextTick(() => {
          initFormData();
        });
      },
      { immediate: true }
    );
    return {
      tableConfig,
      tableDatas,
      pageParam,
      selectionChange,
      pageSizeChange,
      pageChange,
      formConfig,
      formData,
      dialogVis,
      openDialog,
      closeDialog,
      confirmSelForm
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
}
</style>
